<template>
    <div>
        <div class="row blog-box">
            <div class="col-sm-6 hezi">
                <img :src="img" alt="" class="imgBlog">
                <span class="blog_fs">{{title}}</span>
            </div>
            <div class="col-sm-6 hezi">
                <img :src="img2" alt="" class="imgBlog">
                <span class="blog_fs">{{ title2 }}</span>
            </div>
        </div>
        <div class="row blog-box">
            <div class="col-sm-6 hezi">
                <img :src="img3" alt="" class="imgBlog">
                <span class="blog_fs">{{title3}}</span>
            </div>
            <div class="col-sm-6 hezi">
                <img :src="img4" alt="" class="imgBlog">
                <span class="blog_fs">{{ title4 }}</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'BlogTags',
    data() {
        return {
            title:"实名认证接口",
            title2:"手机入网时长",
            title3:"短信API服务",
            title4:"季度上网服务",
            // img: require(`@/assets/images/blog/blog-1.png`),
            img2: require(`@/assets/images/blog/blog-2.png`),
            img3: require(`@/assets/images/blog/blog-3.png`),
            img4: require(`@/assets/images/blog/blog-4.png`)


        }
    }
}
</script>
<style scoped>
.blog-box{
    margin: 10px 0px;
}
.hezi:hover{
    cursor: pointer;
    background-color: #f5f8fa;
}
.hezi{
    box-sizing: border-box;
    width: 50%;
    height: 105px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
.imgBlog{
    width: 60px;
    height: 60px;
    padding: 5px;
    margin-top: 5px;
}
.blog_fs{
    font-size: 12px;
    margin: 5px 0px;
}


</style>